import React from 'react';
import ReactEcharts from 'echarts-for-react';
import * as Utils from '../../../common/utils';

const commonOption = {
        toolbox: {
            show: true,
            right: '9.4%',
            feature: {
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
            }
        },
        color: ['#53ADFB'],
        legend: {
            selectedMode: false,
            bottom: 0,
            show: false,
        },
        grid: {
            top:'80',
            left: '10%',//因旋转导致名字太长的类目造成遮蔽，可以配合这两个属性
            bottom:'10%'// 分别表示：距离左边距和底部的距离，具体数值按实际情况调整
        },
    };

class Echarts extends React.Component{
    constructor(props) {
        super(props);
    }
    shouldComponentUpdate(nextProps){
        const propsEqual = Utils.shallowEqual(this.props,nextProps);
        return !propsEqual;
    }
    render() {
        return (
            <ReactEcharts
                option={{...commonOption, ...this.props.option}}
                className={'react_for_echarts'}
                style={{height: 700}}
                notMerge={true}
            />
        );
    }

}
export default Echarts;